<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @clear="clearForm"
      @handleQuery="getList(1)"
    />
    <div class="doumee_table_header">
      <el-button
        v-preventReClick
        type="primary"
        @click="openModal"
      >{{ $t('message.add') }}</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="tableLoading"
      :data="dataList"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tableb"
    >
      <el-table-column prop="name" align="center" show-overflow-tooltip :label="$t('message.gzmc')" min-width="200" />
      <el-table-column prop="money" align="center" :label="$t('message.oldprice')" min-width="100" />
      <el-table-column prop="money" align="center" :label="$t('message.csjfsx')" min-width="100" />
      <el-table-column align="center" :label="$t('message.csdjdw')" min-width="120">
        <template v-slot="scoped">
          {{ scoped.row.unitPrice }} / {{ scoped.row.units == 30 ? $t('message.fz30') : $t('message.fz60') }}
        </template>
      </el-table-column>
      <el-table-column prop="sortNum" align="center" :label="$t('message.sort')" min-width="100" />
      <el-table-column prop="lastTime" align="center" :label="$t('message.scxgsj')" min-width="160" />
      <el-table-column align="center" fixed="right" :label="$t('message.status')" min-width="100">
        <template v-slot="scoped">
          <el-switch v-model="scoped.row.status" @change="statusChange(scoped.row)" />
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" :label="$t('message.caozuo')" :width="$i18n.locale === 'ZH'? 120 : 180">
        <template v-slot="scoped">
          <div class="flex-cc">
            <el-button
              v-preventReClick
              type="text"
              @click="openModal(scoped.row)"
            >{{ $t('message.edit') }}</el-button>
            <el-button
              v-preventReClick
              type="text"
              class="secondColor"
              @click="deleteRule(scoped.row.id)"
            >{{ $t('message.del') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @SizeChange="pageSizeChange"
      @current-change="currentPageChange"
    />

    <OvertimeAdd ref="refModalAdd" @submit="getList" />
  </div>
</template>

<script>
import OvertimeAdd from './compoents/overtimeAdd.vue'
import QueryForm from '@/components/QueryForm'
import dayjs from 'dayjs'

import { queryFormConfig } from './config'
import { ticketChargeTemp, ticketChargeDel, ticketChargeTempEdit } from '@/api'
export default {
  name: 'Overtime',
  components: {
    OvertimeAdd,
    QueryForm
  },
  data() {
    return {
      filters: {
        name: ''
      },
      queryFormConfig,
      pagination: {
        firstQueryTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        page: 1,
        rows: 10
      },
      tableLoading: false,
      dataList: [],
      totalCount: 0,

      ruleDetail: {},
      modalOvertimeAdd: false
    }
  },
  created() {
    if (this.$route.query && this.$route.query.name) {
      this.filters.name = this.$route.query.name
    }
    this.getList(1)
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    getList(page) {
      this.pagination.page = page || this.pagination.page
      const data = {
        pagination: this.pagination,
        param: { ...this.filters }
      }
      this.tableLoading = true
      ticketChargeTemp(data).then(res => {
        this.tableLoading = false
        if (res.errorCode !== '000000') return
        this.dataList = res.recordList
        this.dataList.forEach(item => {
          item.status = item.status !== '0'
        })
        this.totalCount = res.totalCount
      }, () => {
        this.tableLoading = false
      })
    },
    clearForm() {
      this.filters.name = ''
      this.getList()
    },
    statusChange(item) {
      item.status = item.status ? '1' : '0'
      ticketChargeTempEdit({ param: { ...item }}).then(res => {
        this.getList()
        if (res.errorCode !== '000000') return
        this.$message.success(this.$t('message.gxztcg'))
      }, () => {
        this.getList()
      })
    },
    openModal(info) {
      if (info) {
        this.ruleDetail = info
        this.$refs.refModalAdd.increaseForm = { ...info }
        console.log(this.$refs.refModalAdd.increaseForm)
      } else {
        this.ruleDetail = {}
      }
      this.$refs.refModalAdd.dialogVisible = true
    },
    deleteRule(id) {
      const that = this
      this.$confirm(this.$t('message.scgzmbtc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          ticketChargeDel({ param: { id }}).then(res => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.delcg'))
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    currentPageChange(val) {
      this.pagination.page = val
      this.getList()
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList()
    }
  }
}
</script>

<style>

</style>
